<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <Header :todos="todos" :addTodo="addTodo"></Header>
        <Main :todos="todos" :selTodo="selTodo" :deleteTodo="deleteTodo"></Main>
        <Footer :todos="todos" :checkAll="checkAll" :deleteSelTodo="deleteSelTodo"></Footer>
      </div>
    </div>
  </div>    
</template>

<script setup lang="ts">
export interface TodoModel {
  id: number,
  content: string
  isSel: boolean
}
export type TodosModel = TodoModel[]
import Header from "@/components/Header/index.vue";
import Main from "@/components/Main/index.vue";
import Footer from "@/components/Footer/index.vue";
import { ref, watch } from "vue";

const todos = ref<TodosModel>(JSON.parse(localStorage.getItem('TODOS') as string) ||[
  { id: 10100, content: "抽烟", isSel: false },
  { id: 10200, content: "喝酒", isSel: true },
  { id: 10300, content: "烫头", isSel: true },
]);

watch(todos,(nval) => {
  localStorage.setItem('TODOS',JSON.stringify(nval))
},{deep:true})

//添加
const addTodo = (todo: TodoModel) => {
  todos.value.push(todo)
}

//选中
const selTodo = (index: number) => {
  todos.value[index].isSel = !todos.value[index].isSel
}

//删除
const deleteTodo = (index: number) => {
  todos.value.splice(index, 1)
}
//全选
const checkAll = (bool: boolean) => {
  todos.value.forEach(todo => todo.isSel = bool)
}
//清除已完成任务
const deleteSelTodo = () => {
  todos.value = todos.value.filter(todo => !todo.isSel)
}

// TS中最重要的  接口  和  泛型
// interface Userinfo {
//   id?: number
//   username: string
//   age: number
// }
// let userinfo: Userinfo = {
//   id: 1001,
//   username: 'gechen',
//   age: 8
// }

//泛型
// 定义的时候定义泛型，使用的时候确定泛型（泛型不是一个确定的类型）

// 泛型函数
// function fn1 () {}
// function fn2 (n: number) {}

// function fn3 (n: number): number { return n}
// function fn4 (n: string): string { return n}
// function fn5 (n: boolean): boolean { return n}
// let a1 = fn3(3)
// let a2 = fn4('臭南桐葛晨')
// let a3 = fn5(true)

// function fn6<T>(n: T): T {return n  }
// let b1 = fn6(3)
// let b2 = fn6('213葛晨')
// let b3 = fn6(false)

// 泛型接口
// interface Userinfo {
//   id?: number
//   username:string
//   age: number,
//   hobby: any
// }

// interface Userinfo<T> {
//   id?: number
//   username: string
//   age: number,
//   hobby: T
// }

// let gechen: Userinfo<string> = {
//   username: '葛晨',
//   age:18,
//   hobby: '爱男生'
// }

// let lisi: Userinfo<number> = {
//   username: '李四',
//   age: 22,
//   hobby: 66
// }

</script>

<style scoped>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
